<!--
 *@description: input
 *@author: Ming
 *@date: 2021-05-04 20:21:29
 *@version: V1.0.5
-->
<template>
  <div :class="['lm-input',{error,clearable}]"
        @mouseenter="hovering = true"
        @mouseleave="hovering = false">
      <input :value="value"   :disabled="disabled" :readonly="readonly"  type="text" :name="name" :autocomplete="autocomplete" :placeholder="placeholder"
        @input="$emit('input',$event.target.value)" 
        @change="$emit('change',$event.target.value)"
        @focus="$emit('focus',$event.target.value);focus=true"
        @blur="$emit('blur',$event.target.value);focus=false"
        >
      <transition name="error">
        <div class="errorConten" v-if="error">{{error}}</div>
      </transition>
      <transition name="suffix">
        <span @click="clearableFn" class="suffix" v-if="clearableVisible">
            <lm-icon class="icon" name="close-circle" ></lm-icon>
        </span>
      </transition>
  </div>
</template>

<script>
import Icon from "./icon";
export default {
  name:"LmInput",
  components: {
    "lm-icon": Icon
  },
  props: {
    value:{
        type: String
    },
    name:{
        type:String
    },
    // 原生属性 自动补全
    autocomplete:{
        type:String,
        default(){
            return 'off'
        },
        validator(value) {
            let arr = [
                'off',
                'on',
            ]
            return arr.includes(value)
        }
    },
    placeholder:{
        type:String,
    },
    // 禁用
    disabled:{
        type:Boolean,
    },
    // 只读
    readonly:{
        type:Boolean,
    },
    error:{
        type:String,
    },
    clearable:{
        type:Boolean,
        default:false
    }
  },
  computed: {
      clearableVisible(){
          if(!this.clearable) return false
          return !!this.value && (this.focus || this.hovering)
      }
  },
  data() {
    return {
        focus:false,
        hovering:false
    };
  },
  watch: {

  },
  created() {

  },
  mounted() {
    
  },
  methods: {
    clearableFn(){
        this.$emit('input', '');
        this.$emit('change', '');
        this.$emit('clear');
    }
  }
};
</script>

<style scoped lang='scss'>
    .error-enter-active, .error-leave-active {
        transition: all .2s;
        transform-origin: 50% 0;
    }
    .error-enter, .error-leave-to {
        opacity: 0;
        transform: scaleY(0);
    }
    .suffix-enter-active, .suffix-leave-active {
        transition: all .2s;
        transform-origin: 50% 0;
    }
    .suffix-enter, .suffix-leave-to {
        opacity: 0;
        transform: translateX(100%);
    }
    .lm-input{
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        vertical-align: middle;
        > input{
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
            cursor: pointer;
            transition: all .3s;
            &::placeholder{
                color: #ccc;
            }
            &:focus{
                outline: none;
                border-color: #409eff;
                box-shadow: 0 0 0 2px rgba(24,144,255,.2)
            }
            &[disabled],&[readonly]{
                background-color: #f5f7fa;
                border-color: #e4e7ed;
                color: #c0c4cc;
                cursor: not-allowed;
            }
            
        }
        &.error{
            > input{
                border-color: #f56c6c;
                &:focus{
                    border-color: #f56c6c;
                    box-shadow: 0 0 0 2px rgba(245,108,108,.2)
                }
            }
        }
        
        >.errorConten{
            color: #f56c6c;
            font-size: 12px;
            line-height: 1;
            padding-top: 4px;
            position: absolute;
            top: 100%;
            left: 0;
        }
        &.clearable{
            > input{
                padding-right: 30px;
            }
        }
        .suffix{
            pointer-events: all;
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            cursor: pointer;
            &:hover{
                color: #75777c;
                > .icon{
                    fill: #75777c;
                }
            }
            > .icon{
                fill: #c0c4cc;
                font-weight: 700;
            }
            
        }
    }
</style>
